<template>
  <h4>unsername: {{ username }}</h4>
  <h4>age: {{ age }}</h4>
  <h4>job: {{ job.type }}</h4>
  <h4>compensation: {{ job.compensation }}</h4>
  <button @click="onBtnClick">Press to change</button>
</template>

<script>
import { ref } from "vue";

export default {
  name: "App",

  setup() {
    // 数据需要 ref() 对数据进行封装，封装成引用实例 refImpl 对象，其值在 _value 属性上，并 Object.defineProperty 的 get()/set() 劫持改数据的读写操作（getter 和 setter 挂载在了 prototype 上）
    const username = ref("张三");
    const age = ref(19)

    console.log('基本类型的变量经过 ref 函数封装后:', username)

    const job = ref({
      type: '种地',
      compensation: 4800
    })

    console.log('对象类型的变量经过 ref 函数封装后:', job)

    function onBtnClick() {
      // 对引用实例中 value 的修改，才能响应式反应到页面上
      username.value = "李四"
      age.value = 48
      job.value = {
        type: '卖菜',
        compensation: '6140'
      }
    }

    return {
      username,
      age,
      job,
      onBtnClick
    };
  },
};
</script>

<style></style>
